<template>
	<div class="playerinformation">
		<!-- 查询表单 -->
		<el-form label-width="80px" class="search">
		  <el-form-item label="账单号">
		    <el-input v-model="search_oldmanBillId" placeholder="请输入账单号"></el-input>
		  </el-form-item>
		  <el-form-item label="老人编号">
		    <el-input v-model="search_oldmanId" placeholder="请输入老人编号"></el-input>
		  </el-form-item>
		  <el-form-item label="账单类型">
			<el-select v-model="search_type" placeholder="请选择账单类型" style="width:160px">
				<el-option v-for="item in billsType" :key="item.value" :label="item.lable" :value="item.value"></el-option>
			</el-select>
		  </el-form-item>
		  <el-form-item label="账单时间">
			<el-col :span="11">
			<el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="search_date" style="width: 150px;"></el-date-picker>
			</el-col>
		  </el-form-item>
		</el-form>
		<!-- 查询按钮 -->
		<el-button type="primary" @click="search()">查询</el-button>
		<el-button type="warning" @click="clear()">清空</el-button>
		<el-button type="success" @click="isAdd()" style="float: right; margin-right: 40px;">添加</el-button>
		<!-- 老人单据表格数据 -->
		<el-table :data="tableData" :row-class-name="tableRowClassName" border fit style="width: 100%" 
		 :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
			<el-table-column fixed type="index" label="序号">
				<template scope="scope"><span>{{scope.$index+(pageNum - 1) * pageSize + 1}} </span></template>
			</el-table-column>
		    <el-table-column prop="id" label="账单号"></el-table-column>
			<el-table-column prop="oldmanId" label="老人编号"></el-table-column>
		    <el-table-column prop="oldmanName" label="老人姓名"></el-table-column>
			<el-table-column prop="billsType" label="账单类型"></el-table-column>
			<el-table-column prop="billsState" label="账单状态"></el-table-column>
			<el-table-column prop="billsMoney" label="应收金额"></el-table-column>
			<el-table-column prop="date" label="账单时间"></el-table-column>
		    <el-table-column fixed="right" label="操作">
		      <template slot-scope="scope">
		          <el-button type="text" @click="edit(scope.row)" size="small" icon="el-icon-edit" circle>编辑</el-button>
				  <el-button type="text" @click="del(scope.row)" size="small" icon="el-icon-delete" circle>删除</el-button>
		      </template>
		    </el-table-column>
		</el-table>
		<div style="text-align:right;">
			<el-pagination background layout="prev, pager, next" :total='pages' :current-page="pageNum" @current-change="changePageNum"></el-pagination>
		</div>

		<!-- 编辑老人账单信息 -->
		<el-dialog :title="titleMsg" :visible.sync="dialogFormVisible">
			<el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="账单号" prop="id">
					<el-input v-model="form.id"></el-input>
				</el-form-item>
				<el-form-item label="老人姓名" prop="oldmanName">
					<el-input v-model="form.oldmanName"></el-input>
				</el-form-item>
				<el-form-item label="账单类型" prop="type">
					<el-select v-model="form.type" placeholder="请选择账单类型" style="width:160px">
						<el-option v-for="item in billsType" :key="item.value" :label="item.lable" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="账单状态" prop="state">
					<el-select v-model="form.state" placeholder="请选择账单类型" style="width:160px">
						<el-option v-for="item in billsState" :key="item.value" :label="item.lable" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="应收金额" prop="billsMoney">
					<el-input v-model="form.billsMoney"></el-input>
				</el-form-item>
				<el-form-item label="账单时间" prop="date">
					<el-input v-model="form.date"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
					<el-button @click="cancelEdit()">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		
	</div>
</template>

<script>
	export default{
		name:"OldmanBills",
		data(){
			return{
				search_oldmanBillId:"",
				search_oldmanId:"",
				search_type:"",
				search_date:"",
				pages:1,
				pageNum:1,
				pageSize:2,
				titleMsg:'',
				billsType:[
					{
						value:1,
						lable:'账户充值'
					},
					{
						value:2,
						lable:'入住费用'
					},
					{
						value:3,
						lable:'服务消费'
					},
					{
						value:4,
						lable:'退住费用'
					}
				],
				billsState:[
					{
						value:0,
						lable:'未支付'
					},
					{
						value:1,
						lable:'已支付'
					},
				],
				tableData: [],
				dialogFormVisible: false,
				formLabelWidth: '120px',
				form: {},
				ruleForm: {							
					id: '',
					oldmanName: '',
					type:'',
					state:'',
					billsMoney:'',
					date:'',
					delivery: false,
					type: []
        		},
				rules: {							//编辑表格内容要求
					id: [
						{ required: true, message: '请输入账单号', trigger: 'blur' }
						// { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
					],
					oldmanId: [
						{ required: true, message: '请输入老人编号', trigger: 'blur' }
						// { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
					],
					type: [
						{ required: true, message: '请选择账单类型', trigger: 'change' }
					],
					state: [
						{ required: true, message: '请输入账单状态', trigger: 'blur' }
					],
					billsMoney: [
						{ required: true, message: '请输入应收金额', trigger: 'blur' }
					],
					date: [
						{ required: true, message: '请输入账单时间', trigger: 'change' }
					]
				},
				
			}
		},
		methods:{
			search(){												//查询
				const data = {
					pageNum : this.pageNum,
					pageSize : this.pageSize,
					id : this.search_oldmanBillId,
					oldmanId : this.search_oldmanId,
					type : this.search_type,
					date : this.search_date,
				};
				let that = this;
				this.$axios.post(that.$global.zuulIp+"/finance/getOldmanBillsPageInfo",data).then((response)=>{
					that.tableData = response.data.list;
					for(let i = 0;i < that.tableData.length;i++){
						that.tableData[i].billsMoney = that.tableData[i].billsMoney.toFixed(2);
						for(let x = 0;x < that.billsType.length;x++){
							if(that.tableData[i].type == that.billsType[x].value){
								that.$set(that.tableData[i],'billsType',that.billsType[x].lable);
								break;
							}
						}
						for(let y = 0;y < that.billsType.length;y++){
							if(that.tableData[i].state == that.billsState[y].value){
								that.$set(that.tableData[i],'billsState',that.billsState[y].lable);
								break;
							}
						}
					}
					that.pages = parseInt(response.data.pages)*10;
				}).catch((response)=>{
					console.log(response);
				})
			},
			clear(){												//清空查询条件
				this.search_oldmanBillId = "";
				this.search_oldmanId = "";
				this.search_type = "";
				this.search_date = "";
			},
			changePageNum(currentPage){								//改变页数
				this.pageNum = currentPage;
				this.search();
			},
			edit(row) {												//点击编辑获取对应行内容
				let that = this;
				this.$axios.get(that.$global.zuulIp+"/finance/getOldmanBillsById?id="+row.id).then((response)=>{
					that.form = response.data;
				}).catch((response)=>{
					console.log(response);
				});
				this.dialogFormVisible = true;
			},
			submitForm(formName) {									//（编辑）表单数据提交
				let that = this;
				let msg = '';
				this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$axios.post(that.$global.zuulIp+"/finance/modOldmanBills",that.form).then((response)=>{
						if(response.data>0){
							msg = '修改成功!';
						}else{
							msg = '修改失败，请联系管理员!';
						}
						that.$alert(msg,{
							confirmButtonText: '确定'
						}).then(()=>{
							that.search();
							that.dialogFormVisible = false;
						})
					}).catch((response)=>{
						console.log(response);
					});
					
				} else {
					console.log('error submit!!');
					return false;
				}
				});
      		},
			cancelEdit(){											//取消按钮触发事件
				this.dialogFormVisible = false;
			},
			del(row){												//点击删除对表格数据进行删除
				let that = this;
				this.$confirm('此操作将永久删除该账单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {
						that.$axios.get(that.$global.zuulIp+"/finance/delOldmanBills?id="+row.id).then((response)=>{
							if(response.data>0){
								that.$message({
									type: 'success',
									message: '删除成功!'
								});
							}else{
								that.$message({
									type: 'error',
									message: '删除失败,请联系管理员!'
								});
							}
							that.pageNum = 1;
							that.search();
						}).catch((response)=>{
							console.log(response);
						})
					}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});          
				});	
			},
			tableRowClassName({row}) {								//改变行内样式
				if (row.billsState == '未支付') {
					return 'warning-row';
				}
				return '';
			}
		},
		mounted:function(){
			this.search();
		}
	}
</script>

<style scoped="scoped">
	.search{
	  display: flex;
	  float: left;
	}
	.playerinformation .el-button{
		margin-left: 15px;
	}
	.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-pagination{
	  margin: 20px;
	  text-align: right;
  }

  .el-dialog .el-form{
	  width: 500px;
  }
</style>
<style>
  .el-table .warning-row {
    background: oldlace;
  }
</style>
